<!doctype html>
<html class="export">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width">
  <meta name="description" content="Cascading grid layout library">

  <title>Masonry</title>

    <link rel="stylesheet" href="css/masonry-docs.css" media="screen">

</head>
<body class="page--index" data-page="index">

  <div class="site-nav">
    <div class="container">
      <ol class="site-nav__list">
        <li class="site-nav__item site-nav__item--homepage">
          <a href=".">Masonry</a></li>
        <li class="site-nav__item site-nav__item--layout">
          <a href="layout.html">Layout</a></li>
        <li class="site-nav__item site-nav__item--options">
          <a href="options.html">Options</a></li>
        <li class="site-nav__item site-nav__item--methods">
          <a href="methods.html">Methods</a></li>
        <li class="site-nav__item site-nav__item--events">
          <a href="events.html">Events</a></li>
        <li class="site-nav__item site-nav__item--appendix">
          <a href="appendix.html">Appendix</a></li>
        <li class="site-nav__item site-nav__item--faq">
          <a href="faq.html">FAQ</a></li>
      </ol>
    </div>
  </div>

    <div class="hero" data-js-module="hero">
      <div class="container">
    
        <div class="hero-grid clearfix">
          <div class="hero-grid__grid-sizer"></div>
    
          <div class="hero-grid__item hero-grid__item--texty hero-grid__item--width3">
            <h1 class="hero__title">Masonry</h1>
            <p class="hero__tagline">Cascading grid layout library</p>
          </div>
    
          <div class="hero-grid__item">
            <a class="hero-grid__big-button" href="masonry.pkgd.min.js">
              <i class="icon icon-file-download"></i>
              Download masonry.&#x200B;pkgd.&#x200B;min.js
            </a>
          </div>
    
    
          <div class="hero-grid__item">
            <a class="hero-grid__big-button" href="https://github.com/desandro/masonry">
              <i class="icon icon-github"></i>
              Masonry on GitHub
            </a>
          </div>
    
          <div class="hero-grid__item hero-grid__item--texty hero-grid__item--width2">
            <h2 class="hero__what-is-title">What is Masonry?</h2>
            <p class="hero__what-is-description">Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You&#x2019;ve probably seen it in use all over the Internet.</p>
          </div>
    
        </div> 
    
      </div> 
    
    </div> 

  <div id="content" class="content container">


    <ul class="page-nav">
<li class="page-nav__item page-nav__item--h2"><a href="#install">Install</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#download">Download</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#cdn">CDN</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#package-managers">Package managers</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#getting-started">Getting started</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#html">HTML</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#css">CSS</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#initialize-with-jquery">Initialize with jQuery</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#initialize-with-vanilla-javascript">Initialize with Vanilla JavaScript</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#initialize-in-html">Initialize in HTML</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#next">Next</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#mit-license">MIT License</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#twitter-updates">Twitter updates</a></li>
</ul>



<h2 id="install">Install</h2>


<h3 id="download">Download</h3>

<ul>
  <li>
    <a href="masonry.pkgd.min.js">masonry.pkgd.min.js</a> minified, or
  </li>
  <li>
    <a href="masonry.pkgd.js">masonry.pkgd.js</a> un-minified
  </li>
</ul>


<h3 id="cdn">CDN</h3>

<p>Link directly to <a href="https://cdnjs.com/libraries/masonry">Masonry files on cdnjs</a>.</p>

<pre><code class="html"><span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">&quot;https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js&quot;</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
<span class="comment">&lt;!-- or --&gt;</span>
<span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">&quot;https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js&quot;</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
</code></pre>


<h3 id="package-managers">Package managers</h3>

<p>Instal with <a href="http://bower.io">Bower</a>: &#xA0;<code>bower install masonry --save</code></p>

<p><a href="https://www.npmjs.com/package/masonry-layout">Install with npm</a>: &#xA0;<code>npm install masonry-layout</code></p>


<h2 id="getting-started">Getting started</h2>


<h3 id="html">HTML</h3>

<p>Include the Masonry <code>.js</code> file in your site.</p>

<pre><code class="html"><span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">&quot;/path/to/masonry.pkgd.min.js&quot;</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
</code></pre>

<p>Masonry works on a container grid element with a group of child items.</p>

<pre><code class="html"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">&quot;grid&quot;</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">&quot;grid-item&quot;</span>&gt;</span>...<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">&quot;grid-item grid-item--width2&quot;</span>&gt;</span>...<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">&quot;grid-item&quot;</span>&gt;</span>...<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  ...
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</code></pre>


<h3 id="css">CSS</h3>

<p>All sizing of items is handled by your CSS.</p>

<pre><code class="css"><span class="class">.grid-item</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">200px</span></span></span>; }</span>
<span class="class">.grid-item--width2</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">400px</span></span></span>; }</span>
</code></pre>


<h3 id="initialize-with-jquery">Initialize with jQuery</h3>

<p>You can use Masonry as a jQuery plugin:
  <code>$(<span class="string">&apos;selector&apos;</span>).masonry()</code>.</p>

<pre><code class="js">$(<span class="string">&apos;.grid&apos;</span>).masonry({
  <span class="comment">// options</span>
  itemSelector: <span class="string">&apos;.grid-item&apos;</span>,
  columnWidth: <span class="number">200</span>
});
</code></pre>


<h3 id="initialize-with-vanilla-javascript">Initialize with Vanilla JavaScript</h3>

<p>You can use Masonry with vanilla JS:
  <code><span class="keyword">new</span> <span class="masonry_keyword">Masonry</span>( elem, options )</code>.
  The <code><span class="masonry_keyword">Masonry</span>()</code> constructor accepts two arguments: the container element and an options object.</p>

<pre><code class="js"><span class="keyword">var</span> elem = <span class="built_in">document</span>.querySelector(<span class="string">&apos;.grid&apos;</span>);
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="keyword">new</span> <span class="masonry_keyword">Masonry</span>( elem, {
  <span class="comment">// options</span>
  itemSelector: <span class="string">&apos;.grid-item&apos;</span>,
  columnWidth: <span class="number">200</span>
});

<span class="comment">// element argument can be a selector string</span>
<span class="comment">//   for an individual element</span>
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="keyword">new</span> <span class="masonry_keyword">Masonry</span>( <span class="string">&apos;.grid&apos;</span>, {
  <span class="comment">// options</span>
});
</code></pre>


<h3 id="initialize-in-html">Initialize in HTML</h3>

<p>You can initialize Masonry in HTML, without writing any JavaScript. Add <code>js-masonry</code> to the class of the container element. <a href="options.html">Options</a> can be set with a <code>data-masonry-options</code> attribute.</p>

<pre><code class="html"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">&quot;grid js-masonry&quot;</span>
  <span class="attribute">data-masonry-options</span>=<span class="value">&apos;{ &quot;itemSelector&quot;: &quot;.grid-item&quot;, &quot;columWidth&quot;: 200 }&apos;</span>&gt;</span>
</code></pre>

<div class="call-out">
  <p>Options set in HTML must be valid JSON. Keys need to be quoted, for example <code><span class="string">&quot;itemSelector&quot;</span>:</code>. Note the HTML attribute <code>data-masonry-options</code> is set with single quotes <code>&apos;</code>, but JSON entities use double-quotes <code>&quot;</code>.</p>
</div>

<h2 id="next">Next</h2>

<p>Learn more about how to use Masonry:</p>

<ul>
  <li><a href="layout.html">Layout</a></li>
  <li><a href="options.html">Options</a></li>
  <li><a href="methods.html">Methods</a></li>
</ul>


<h2 id="mit-license">MIT License</h2>

<p>Masonry is released under the <a href="http://desandro.mit-license.org/">MIT License</a>. Have at it.</p>



<h2 id="twitter-updates">Twitter updates</h2>

<p><a class="twitter-timeline" href="https://twitter.com/search?q=masonry+from%3Ametafizzyco%2C+OR+from%3Adesandro" data-widget-id="502211983844704256">Masonry Tweets</a></p>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<div id="notification"></div>

  </div>

  <div class="site-nav">
    <div class="container">
      <ol class="site-nav__list">
        <li class="site-nav__item site-nav__item--homepage">
          <a href=".">Masonry</a></li>
        <li class="site-nav__item site-nav__item--layout">
          <a href="layout.html">Layout</a></li>
        <li class="site-nav__item site-nav__item--options">
          <a href="options.html">Options</a></li>
        <li class="site-nav__item site-nav__item--methods">
          <a href="methods.html">Methods</a></li>
        <li class="site-nav__item site-nav__item--events">
          <a href="events.html">Events</a></li>
        <li class="site-nav__item site-nav__item--appendix">
          <a href="appendix.html">Appendix</a></li>
        <li class="site-nav__item site-nav__item--faq">
          <a href="faq.html">FAQ</a></li>
      </ol>
    </div>
  </div>

  <div class="site-footer">
  
    <div class="container">
        <p class="site-footer__copy">
          Masonry is made by <a href="http://desandro.com">David DeSandro</a>.
          Make something rad with it.
        </p>
  
  
      <p class="site-footer__copy">Help improve these docs.
        <a href="https://github.com/desandro/masonry-docs/issues/">Open an issue</a> or
        <a href="https://github.com/desandro/masonry-docs/blob/master/content/index.mustache">pull request</a>.</p>
  
    </div>
  
  </div>

<!-- Masonry does NOT require jQuery.
     jQuery is only used to demonstrate Masonry as a jQuery plugin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="bower_components/jquery/dist/jquery.min.js"><\/script>')</script>

  <script src="js/masonry-docs.min.js"></script>


</body>
</html>
